<template>
  <div class="login-box">
    <div class="login-box-header">
      <a
          href="javascript:;"
          :class="{ 'LorR-selected': loginClicked !== 1 }"
          @click="loginClicked = 0"
          id="login-tag"
      >
        <font>登 录</font>
      </a>
      <a
          href="javascript:;"
          :class="{ 'LorR-selected': loginClicked === 1 }"
          @click="loginClicked = 1"
          id="register-tag"
      >
        <font>注 册</font>
      </a>
    </div>
    <login-model
        :style="{ display: loginBlock }"
        @sucess="toMain()"
        @VL="loginClicked = 2"
    />
    <register-model
        @sucess="toMain()" :style="{ display: registerBlock }"/>
    <verify-model
        @sucess="toMain()" :style="{ display: verifyBlock }" @PL="loginClicked = 0"/>
    <div id="login-box-footer"></div>
  </div>
</template>

<script>
import LoginModel from "./LoginModel.vue";
import RegisterModel from "./RegisterModel.vue";
import VerifyModel from "./VerifyModel.vue";
import global from "@/components/Global";
export default {
  components: {LoginModel, RegisterModel, VerifyModel},
  data() {
    return {
      loginClicked: 0,
    };
  },
  methods: {
    toMain() {
      global.toMain(this);
    },
  },
  computed: {
    loginBlock() {
      return this.loginClicked === 0 ? "block" : "none";
    },
    registerBlock() {
      return this.loginClicked === 1 ? "block" : "none";
    },
    verifyBlock() {
      return this.loginClicked === 2 ? "block" : "none";
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/global";

.login-box {
  background-color: #fff;
  width: 325px;
  height: 325px;
  border-radius: 6%;
  box-shadow: 0 0 10px 0 hsl(0deg 0% 86% / 57%);
  position: relative;
  padding: 30px 45px;

  .login-box-header {
    text-align: center;
    float: left;
    width: 100%;

    a {
      @include goodA;
      font-size: x-large;
    }

    .LorR-selected {
      color: $theme;
      font-weight: bold;
      border-bottom: $theme solid 3px;
    }

    #login-tag {
      margin-right: 45px;
    }

    #register-tag {
      margin-left: 45px;
    }
  }
}
</style>
